<template>
  <div>
    <div>
      <MyNav></MyNav>
    </div>

    <div>
      <el-carousel height="400px" width="100%" motion-blur>
        <el-carousel-item v-for="item in bannerList.data" :key="item.id">
          <el-image
            :src="item.bannerSrc"
            alt=""
            fit="cover"
            style="width: 100%; height: 100%" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="container mx-auto pt-5 pb-5 text-xl font-bold">
      <div>热门课程</div>
    </div>
    <div class="container flex justify-between items-center mx-auto">
      <div
        v-for="item in hotList.data"
        :key="item.id"
        @click="goDetail(item.id)">
        <div class="hotList bg-[#fff]">
          <el-image
            :src="item.cover"
            alt=""
            style="width: 280px; height: 150px" />

          <div class="p-2">
            <div>
              {{ item.title }}
            </div>
            <div class="py-1 text-red-500">￥{{ item.price }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="container mx-auto pt-5 pb-5 text-xl font-bold">
      <div>新上好课</div>
    </div>
    <div class="container flex justify-between items-center mx-auto">
      <div
        v-for="item in newList.data"
        :key="item.id"
        @click="goDetail(item.id)">
        <div class="hotList bg-[#fff]">
          <el-image
            :src="item.cover"
            alt=""
            style="width: 280px; height: 150px" />
          <div class="p-2">
            <div>
              {{ item.teacherId }}
            </div>
            <div class="py-1 text-red-500">￥{{ item.price }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const router = useRouter();
const { data: bannerList } = await useFetch(
  "http://47.113.230.113:8088/banner/list"
);
const { data: hotList } = await useFetch(
  "http://47.113.230.113:8088/pc/index/hot"
);
const { data: newList } = await useFetch(
  "http://47.113.230.113:8088/pc/index/new"
);
//跳转详情页
const goDetail = (id) => {
  router.push({ path: "/details", query: { id: id } });
};
</script>

<style lang="scss" scoped>
.hotList {
  border-radius: 8px;
  overflow: hidden;
}
</style>
